<template>
    <div class="layout">
        <el-row class="layout-el-row">
            <el-col :span="4" class="sidebar-menu-col">
                <el-menu class="sidebar-menu" theme="dark" @open="handleOpen" @close="handleClose">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-document"></i>招投标
                        </template>
                        <el-menu-item-group>
                            <template slot="title">招标</template>
                            <el-menu-item index="1-1">列表</el-menu-item>
                            <el-menu-item index="1-2">新建</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <template slot="title">投标</template>
                            <el-menu-item index="1-3">列表</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-menu"></i>贷款
                        </template>
                        <el-menu-item index="2-1">列表</el-menu-item>
                        <el-menu-item index="2-2">新建</el-menu-item>
                    </el-submenu>

                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-star-on"></i>投资
                        </template>
                        <el-menu-item index="3-1">列表</el-menu-item>
                    </el-submenu>

                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-star-off"></i>用户
                        </template>
                        <el-menu-item index="4-1">列表</el-menu-item>
                    </el-submenu>

                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-more"></i>其他
                        </template>
                        <el-menu-item index="5-1">修改密码</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-col>
            <el-col :span="20" class="main">
                <div class="header">
                    <div class="icon">Admin</div>
                    <el-dropdown class="user-menu" trigger="click">
                        <span class="el-dropdown-link">
                            current-user<i class="el-icon-caret-bottom el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="main-body">
                    <div class="row breadcrumb-row">
                        <!--<el-breadcrumb separator="/">-->
                            <!--<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
                            <!--<el-breadcrumb-item>活动管理</el-breadcrumb-item>-->
                            <!--<el-breadcrumb-item>活动列表</el-breadcrumb-item>-->
                            <!--<el-breadcrumb-item>活动详情</el-breadcrumb-item>-->
                        <!--</el-breadcrumb>-->
                    </div>

                    <div class="row main-row">
                    <!--<el-table-->
                            <!--:data="tableData"-->
                            <!--style="width: 100%">-->
                        <!--<el-table-column-->
                                <!--prop="date"-->
                                <!--label="日期"-->
                                <!--width="180">-->
                        <!--</el-table-column>-->
                        <!--<el-table-column-->
                                <!--prop="name"-->
                                <!--label="姓名"-->
                                <!--width="180">-->
                        <!--</el-table-column>-->
                        <!--<el-table-column-->
                                <!--prop="address"-->
                                <!--label="地址">-->
                        <!--</el-table-column>-->
                    <!--</el-table>-->
                    </div>

                    <div class="row page-row">
                        <!--<el-pagination-->
                                <!--@size-change="handleSizeChange"-->
                                <!--@current-change="handleCurrentChange"-->
                                <!--:current-page.sync="currentPage1"-->
                                <!--:page-size="100"-->
                                <!--layout="total, prev, pager, next"-->
                                <!--:total="1000">-->
                        <!--</el-pagination>-->
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]

            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style lang="less">
    .layout {
        height: 100%;
    }
    .sidebar-menu {
        height: 100%;
    }
    .layout-el-row {
        height: 100%;
    }
    .sidebar-menu {
        height: 100%;
    }
    .sidebar-menu-col {
        height: 100%;
    }

    .main {
        .header {
            height: 56px;
            display: -webkit-flex;
            display:         flex;
            -webkit-align-items: center;
            align-items: center;
            background: #eef1f6;
        }
        .user-menu {
            position: absolute;
            right: 20px;
        }
        .icon {
            display: inline-block;
            font-size: 32px;
            color: #677484;
            padding: 0 10px;
        }

        @main-body-padding: 20px;
        .main-body {
            background: #fff;
        }
        .row {
            padding-bottom: @main-body-padding;
        }
        .main-row {
            padding: @main-body-padding;
        }
        .breadcrumb-row {
            padding: @main-body-padding;
            background: #fff;
            border-bottom: 1px solid #eef1f6;
        }
        .page-row {
            padding: @main-body-padding;
            text-align: right;
            .el-pagination {
                padding: 0;
            }
        }
    }
</style>